<template>
	<view class="classlist">

		<view class="loadingLayout" v-if="!classList.length&&!noData">
			<uni-load-more status="loading"></uni-load-more>

		</view>
		<view class="content">


<!-- open-type="reLaunch" 这里 如果本组件 用了 unload清除 内存，哪就不用 relaunch 不然storage在新页面 就没了-->
			<navigator :url="'/pages/preview/preview?id='+item._id" class="item"
				v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>


		</view>





		<view class="loadingLayout" v-if="noData||classList.length">
			<uni-load-more :status="noData?'no-more':'loading'"></uni-load-more>

		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	// 骨架屏  和 底部加载效果
	import {
		apiGetClassifyList,apiGetHistoryList
	} from "@/api/api.js"
	
	
	import { gotoHome } from "@/utils/common.js"
	const noData = ref(false)
	const queryParams = ref({
		pageSize: 12,
		pageNum: 1,
		classid: ""
	})
	const classList = ref([])
	const name = ref("")
	const classid = ref("")
	const getClassList = async () => {
		let res={};
		if(queryParams.value.type){
			res = await apiGetHistoryList(queryParams.value)
		}
		else{
			res = await apiGetClassifyList(queryParams.value)
		}
		

	 
		classList.value = [...classList.value, ...res.data]
		if (res.data.length < queryParams.value.pageSize) {
			noData.value = true;
		}
		uni.setStorageSync("storageClassList", classList.value)
		console.log('storage', uni.getStorageSync("storageClassList"))
	}
	// 发送给好友
	onShareAppMessage((res) => {
		console.log('share', res)
		// 右上角 悬浮 是 from menu
		// 还有 一种 button opentype share
		// "`/pages/classlist/classlist?classid=${item._id}&name=${item.name}`"
		console.log('fenxi', `/pages/classlist/classlist?id=${queryParams.value.classid}&name=${name.value}`)
		return {
			title: "wallpaper" + name.value,
			// 如果分享首页 就写首页地址
			// "/pages/classlist/classlist?classid="+queryParams.value.classid+'&'

			path: `/pages/classlist/classlist?id=${queryParams.value.classid}&name=${name.value}}`
		}

	})
	//query



	onShareTimeline(()=>{
		return {
		  title:`wallpaper ${name.value}`,
		  // 如果分享首页 就写首页地址
		  path:"/pages/classlist/classlist",
		  // 如果用了common里的 要引入，这里演示 用static
		  imageUrl:classList.value[0].smallPicurl,
		  query:`classid=${classid.value}&name=${name.value}`
		 }
	})
	
	onShareAppMessage(()=>{
		return {
			 // 右上角 悬浮 是 from menu
			 // 还有 一种 button opentype share	
			  title:`wallpaper ${name.value}`,
			  // 如果分享首页 就写首页地址
			  path:`/pages/classlist/classlist?id=${classid.value}&name=${name.value}`

		}
	})
	//setup是最早的，早于onload
	onLoad((option) => {
		if(option.type){
			queryParams.value.type=option.type
		}
		
		
		
		// if(!option.classid){
		// 	gotoHome()
		// }
		console.log('option', option)
		classid.value = option.id;
		queryParams.value.classid = option.id;
		name.value = option.name;
		uni.setNavigationBarTitle({
			title: name.value
		})

		getClassList();
	})
	// 当 返回首页 的时候，把本页的缓存清除
	
	onUnload(() => {
		uni.removeStorageSync("storageClassList")


	})
	onReachBottom(() => {
		queryParams.value.pageNum++;
		if (!noData.value) {
			getClassList()
		} else return;


	})
</script>

<style lang="scss" scoped>
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					// inline-block 转为Block;否则 下边 留白
					display: block;


				}

			}
		}
	}
</style>